<template>
    <el-form :model="fig" ref="infodata" label-width="120px" class="demo-ruleForm" label-position="right" style="width:800px;">
    
        <el-form-item label="酒店ID" prop="app_id" class="bg-wid">
            <el-input v-model="fig.hotel_id" :disabled="true"></el-input>
        </el-form-item>
    
        <el-form-item label="APPID" prop="app_id" class="bg-wid">
            <el-input v-model="fig.app_id"></el-input>
        </el-form-item>
    
        <el-form-item label="酒店简介" prop="app_id" class="bg-wid">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="fig.hotel_introduce">
            </el-input>
        </el-form-item>
    
        <el-form-item label="酒店LOGO" prop="hotel_logo">
            <el-upload class="avatar-uploader" :action="uploadingUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="fig.hotel_logo" :src="fig.hotel_logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
    
        <el-form-item>
            <el-button type="primary" @click="figSubmit">确定</el-button>
        </el-form-item>
    </el-form>
</template>
<script>

export default {
    data() {
        return {
            uploadingUrl: this.ajaxUrl() + "/index/image",
            fig: {
                hotel_id: 0,
                hotel_logo: "",
                app_id: "",
                hotel_introduce: ""
            }
        }
    },
    mounted() {
        this.$http.get(this.ajaxUrl() + "/index/hotelConfig?id=" + this.$route.params.id).then((res) => {
            this.fig = res.data;
        })
    },
    components: {

    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.fig.hotel_logo = this.ajaxUrl() + "/images" + file.response.msg
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (file.type != 'image/jpeg' && file.type != 'image/png') {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        figSubmit() {
            this.$http.get(this.ajaxUrl() + '/index/mcationConfig', {
                params: {
                    fig: this.fig
                }
            }
            ).then((res) => {
                let _this = this;
                if (res.data.sort === 1) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success',
                        duration: 1000,
                        onClose: function () {
                            _this.$router.push('/conList');
                        }
                    });
                } else {
                    this.$message.error('修改失败！');
                }
            })
        }
    }
}

</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>